<!--好友信息tab栏-->
<template>
    <div class="user-friend-tab">
        <!-- 头部搜索框，添加好友按钮 -->
        <div class="header">
            <div class="search-warp">
                <div :class="'search-view' + (isSearchMode?' search-view-focus':'')">
                    <i class="icon el-icon-search"></i>
                    <input type="text" placeholder="搜索" @focus="enterSearchMode" v-model="searchKw" @input="filterFriend" />
                    <i class="icon-exit el-icon-close" @click="exitSearchMode"></i>
                </div>
                <div class="add">
                    <search-user-com />
                </div>
            </div>
        </div>
        <!-- 主体 -->
        <div class="content scroll-bar-v
        ">
            <!-- 非搜索模式下的组件 -->
            <div v-show="!isSearchMode">
                <!-- 好友请求组件 -->
                <div class="func-item">
                    <friend-request />
                </div>
                <!-- 好友分组操作 -->
                <div class="func-item">
                    <friend-group-option :groups="groupListSource" />
                </div>
                <!-- 其他信息，使用折叠面板 -->
                <el-collapse class="collapse" v-model="openedMenuList">
                    <el-collapse-item title="好友列表" name="_default_">
                        <friend-list-com :friendList="$store.state.friends" :name="'_default_'" :groupList="groupListSource"
                            @selectFriend="selectFriend" />
                    </el-collapse-item>
                    <el-collapse-item v-for="item in groupList" :key="item.name" :title="item.name" :name="item.name" >
                        <friend-list-com :friendList="item.friends" :name="item.name" :groupList="groupListSource"
                            @selectFriend="selectFriend" />
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 搜索模式下的组件 -->
            <div class="search-content" v-show="isSearchMode">
                <div class="info" v-for="friend in filterFriendList" 
                    :key="friend.user.email" @click="selectFriend(friend)">
                    <div class="avatar">
                        <el-image :src="friend.user.avatar" fit="cover" />
                        <!-- 离线遮罩层 -->
                        <div class="filter" v-show="!friend.user.online"></div>
                    </div>
                    <div class="remark">{{friend.remark}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import FriendRequest from './FriendRequest.vue'
import FriendListCom from './FriendListCom.vue'
import SearchUserCom from './SearchUserCom.vue'
import FriendGroupOption from './FriendGroupOption.vue'
import axios from 'axios'

@Component({
    components:{
        FriendRequest,FriendListCom,SearchUserCom,FriendGroupOption
    }
})
export default class UserFriendTab extends Vue {

    $store: any

    // 输入框是否具有焦点
    public isSearchMode:boolean = false

    // 搜索模式下的好友过滤列表
    public filterFriendList:any[] = []
    
    // 过滤的关键字
    public searchKw:string = ''

    // 展开的折叠面板菜单项
    public openedMenuList:any[] = ['_default_']

    // 分组元数据列表[{createTime,user,targetUserEmails,name}]
    public groupListSource:any[] = []

    beforeMount() {
        this.getFriendGroup()
    }

    // 获取好友分组
    public getFriendGroup(){
        axios.get('/api/v1/friend/group')
            .then(res=>{
                if(res.data.code===200){
                    this.groupListSource = res.data.data
                }else{
                    this.$message.error(res.data.msg)
                }
            })  
            .catch(err=>{
                this.$message.error('获取分组失败:' + err)
            }) 
    }

    // 选择指定的好友
    public selectFriend(friend:any){
        this.$emit('selectContacts', friend.user)
    }

    // 进入搜索模式
    public enterSearchMode(){
        this.isSearchMode = true
        this.filterFriendList = this.$store.state.friends;
    }

    // 退出搜索模式
    public exitSearchMode(){
        this.isSearchMode = false
        this.searchKw = ''
        this.filterFriendList = []
    }

    // 通过关键字过滤好友信息
    public filterFriend(){
        const friends:any[] = this.$store.state.friends;
        this.filterFriendList = []
        friends.forEach(friend=>{
            if(friend.remark.startsWith(this.searchKw)){
                this.filterFriendList.push(friend)
            }
        })
    }

    // 处理好友分组，从email中找出其对应的好友信息
    get groupList(){
        const globalFriends:any[] = this.$store.state.friends;
        // 处理后的列表
        const handledList:any = []
        this.groupListSource.forEach(group=>{
            const emailList:string[] = group.targetUserEmails;
            const friends:any[] = []
            // 从好友列表中找出对应的好友信息，加入到好友数组中
            emailList.forEach(email=>{
                const friend = globalFriends.find(f=>f.user.email===email)
                if(typeof friend !== 'undefined'){
                    friends.push(friend)
                }
            })
            handledList.push({
                createTime: group.createTime,
                name: group.name,
                friends
            })
        })
        return handledList
    }

}
</script>

<style lang="less" scoped>
@import '../css/index.less';
.user-friend-tab{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    background: linear-gradient(to right, #ECEAE9, #EBE8E7);
    .header {
        padding: 20px 10px 10px 10px;
        background-color: #F7F7F7;
        .search-warp {
            display: flex;
            justify-content: space-between;
            //具有焦点时的样式
            .search-view-focus{
                background-color: #F7F7F7 !important;
                border: 1px solid #ccc;
                input{
                    background-color: #F7F7F7 !important;
                }
                .icon-exit{
                    display: block !important;
                }
            }
            .search-view {
                flex: 1;
                height: 25px;
                background-color: #E2E2E2;
                display: flex;
                align-items: center;
                flex-shrink: 0.5;
                margin-right: 10px;
                border-radius: 5px;
                overflow: hidden;
                .icon {
                    font-size: 10px;
                    padding: 0px 5px;
                }
                input {
                    flex: 1;
                    width: 50%;
                    outline: none;
                    border: none;
                    height: 100%;
                    background-color: #E2E2E2;
                    font-size: 12px;
                }
                .icon-exit{
                    background-color: #E2E2E2;
                    border-radius: 50%;
                    margin-right: 5px;
                    font-size: 12px;
                    padding: 1px;
                    color: #777;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    display: none;
                    &:hover{
                        background-color: #C7C6C5;
                    }
                }
            }

            .add {
                background-color: #E2E2E2;
                font-size: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 25px;
                height: 25px;
                border-radius: 5px;
                cursor: pointer;
                overflow: hidden;
                &:hover{
                    background-color: #C7C6C5;
                }
            }
        }
    }
    .content{
        width: 100%;
        flex: 1;
        .func-item{
            width: 100%;
            border-bottom: 1px solid #DEDBDA;
            cursor: pointer;
        }
        /deep/ .el-collapse-item__header{
            padding: 0px 10px;
            background-color: #EBE8E7;
        }
        /deep/ .el-collapse-item__wrap{
            background-color: #F0F0F0;
        }
        .search-content{
            .info{
                display: flex;
                align-items: center;
                padding: 10px;
                &:hover:not(.info-select){
                    background-color: #DEDBDA;
                }
                .avatar{
                    width: 40px;
                    height: 40px;
                    border-radius: 4px;
                    overflow: hidden;
                    position: relative;
                    .el-image{
                        width: 100%;
                        height: 100%;
                    }
                    .filter{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        background-color: rgba(0, 0, 0, 0.5);
                    }
                }
                .remark{
                    padding: 0 10px;
                    font-size: 14px;
                    color: black;
                }
            }
        }
    }
}
</style>